<template>
<div class="wrapper">
              <v-head @getContDiv="handerHead"></v-head>
              <v-sidebar></v-sidebar>
              <div :class="['content-box', showClass ? 'content-collapse' : '']" >
                  <div class="content_wrapper">
                      <v-tags></v-tags>
                      <div class="container messageboard">
                              <!-- 查询区----start -->
                              <el-form :label-position="labelPosition" :label-width="labelWidth" :inline="true" ref="formSearch" :model="formSearch" class="demo-form-inline">
                                  <el-form-item label="昵称" prop="name">
                                      <el-input v-model="formSearch.userName" placeholder="昵称"></el-input>
                                  </el-form-item>
                                  <el-form-item label="状态" prop="status">
                                      <el-select v-model="formSearch.status" placeholder="请选择状态">
                                          <el-option label="正常" value=1></el-option>
                                          <el-option label="已拉黑" value=0></el-option>
                                      </el-select>
                                  </el-form-item>

                                  <el-form-item label=" " style="margin-left:50px;">
                                      <el-button type="primary" @click="onSearch">查询</el-button>
                                      <el-button type="warning" plain @click="onReset">重置</el-button>
                                  </el-form-item>
                              </el-form>
                              <!-- 查询区----end -->
                              <!-- 操作区----start -->
                              <el-row class="mgb15">
                                  <el-button size="small" round type="primary" @click="handleAdd">新增</el-button>
                                  <!--<el-button size="small" round type="danger" @click="deleteMany">批量删除</el-button>-->
                              </el-row>
                              <!-- 操作区----end -->
                              <!-- 表格---start -->
                              <el-table :data="tableData" v-loading="listLoading"  border stripe style="width: 100%" @selection-change="handleSelectionChange">
                                  <el-table-column type="selection" width="50">
                                  </el-table-column>
                                  <el-table-column prop="userName" label="昵称" width="200" align="center" sortable>
                                  </el-table-column>
                                  <el-table-column prop="account" label="账号" align="center" width="200">
                                  </el-table-column>
                                  <el-table-column prop="status" label="性别" align="center" width="200">
                                       <template slot-scope="scope">
                                          <span>{{ scope.row.sex==1?'男':'女' }}</span>
                                      </template>
                                  </el-table-column>
                                  <el-table-column prop="status" label="状态" align="center" width="200">
                                       <template slot-scope="scope">
                                          <span>{{ scope.row.status==1?'正常':'已拉黑' }}</span>
                                      </template>
                                  </el-table-column>
                                  <el-table-column prop="createTime" label="创建日期" :formatter="this.$common.timestampToTime" width="200" sortable>
                                  </el-table-column>

                                  <el-table-column label="操作" fixed="right" min-width="230">
                                      <template slot-scope="scope">
                                          <el-button size="mini" plain type="primary" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
                                          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                          <el-button size="mini" plain type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                      </template>
                                  </el-table-column>
                              </el-table>
                              <el-pagination background layout="total,sizes,prev, pager, next,jumper" :current-page="pageInfo.currentPage" :page-size="pageInfo.pageSize" :total="pageInfo.pageTotal" :page-sizes="[5, 10, 20, 50]" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                              </el-pagination>
                              <!-- 表格---end -->

                              <!-- 编辑弹框---start -->
                              <el-dialog  :title="formEditTitle" :visible.sync="dialogEdittVisible" width="700px" @close="closeDialog('formEdit')">
                                  <el-form :label-position="labelPosition" :label-width="labelWidth" :rules="rulesEdit" :disabled="formEditDisabled" :inline="true" ref="formEdit" :model="formEdit" class="demo-form-inline">
                                       <el-form-item label="姓名" prop="userName">
                                            <el-input v-model="formEdit.userName" placeholder="姓名" ></el-input>
                                  </el-form-item>
                                  <el-input v-model="formEdit.userId" placeholder="userId" disabled style='display : none'></el-input>
                                      <el-form-item label="账号" prop="account">
                                          <el-input v-model="formEdit.account" placeholder="账号"></el-input>
                                      </el-form-item>
                                       <el-form-item label="性别" prop="sex">
                                          <el-select v-model="formEdit.sex" placeholder="性别">
                                              <el-option label="男" value="1"></el-option>
                                              <el-option label="女" value="0"></el-option>
                                              <el-option label="未知" value=""></el-option>
                                          </el-select>
                                      </el-form-item>
                                       <el-form-item label="密码" prop="password">
                                          <el-input  v-model="formEdit.password" placeholder="请输入密码"></el-input>
                                      </el-form-item>
                                       <el-form-item label="状态" prop="status">
                                          <el-select v-model="formEdit.status" placeholder="状态">
                                              <el-option label="正常" value=1></el-option>
                                              <el-option label="已拉黑" value=0></el-option>
                                          </el-select>
                                      </el-form-item>
                                      <el-form-item label="手机号码" prop="phone">
                                          <el-input v-model="formEdit.phone" placeholder="手机号码"></el-input>
                                      </el-form-item>
                                  </el-form>

                                  <div slot="footer" class="dialog-footer">
                                      <el-button @click="dialogEdittVisible = false">取 消</el-button>
                                      <el-button v-if="!formEditDisabled" type="primary" @click="handleSave">确 定</el-button>
                                  </div>
                              </el-dialog>

                              <!-- 编辑弹框---end -->

                          </div>

                      </div>
                      <v-footer></v-footer>
                  </div>

              </div>
          </div>

</template>

<style lang="scss">
.messageboard{
    // 设置输入框的宽度
    .el-form-item__content {
        width: 220px;
    }
}

</style>

<script>
import apis from '../../apis/apis';
import vHead from '../common/Header.vue';
import vSidebar from '../common/Sidebar.vue';
import vTags from '../common/Tags.vue';
import vFooter from '../common/Footer.vue';
import bus from '../common/bus';

export default {
    name: 'messageboard',
    data() {
        return {
            showClass :false,
            listLoading : false,//
            pageInfo: { //分页
                currentPage: 1,
                pageSize: 5,
                pageTotal: 0
            },
            formSearch: { //表单查询
                userName: '',
                status:''
            },
            formEdit: { //表单编辑
                userId:null,
                userName: '',
                password:'',
                account:'',
                sex:'',
                phone: '',
                status : ''
            },

             rulesEdit:  {
                name: [
                    { required: true, message: "请输入姓名", trigger: "blur" },
                    { min: 2, max: 4, message: "长度在 2 到 4 个字符", trigger: "blur" }
                ],
                type: [{ required: true, message: "请选择类别", trigger: "change" }],
                gender: [{ required: true, message: "请选择性别", trigger: "change" }]
            },
            formEditTitle:'编辑',//新增，编辑和查看标题
            formEditDisabled:false,//编辑弹窗是否可编辑
            dialogEdittVisible: false,  //编辑弹框显示
            dialogType:'',//弹框类型：add,edit,show
            tableData: [],
            labelPosition: 'right', //lable对齐方式
            labelWidth: '80px', //lable宽度
            formLabelWidth: '120px',
            multipleSelection: []
        };
    },
    components: {
              vHead, vSidebar, vTags, vFooter
          },
    created() {
                  bus.$on('collapse', msg => {
                      this.collapse = "成功";
                  })

                  // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
                  bus.$on('tags', msg => {
                      let arr = [];
                      for (let i = 0, len = msg.length; i < len; i++) {
                          msg[i].name && arr.push(msg[i].name);
                      }
                      this.tagsList = arr;
                  })
       },
    computed:{

    },
    filters: {
    },
    mounted(){
        this.onSearch();
        var loginLog = {
            ip: returnCitySN["cip"],
            city: returnCitySN["cname"] + "-增删改查页"
        };
    },
    methods: {
        handerHead (){
            this.showClass==true?(this.showClass=false):(this.showClass=true);
        },
        /**
         * 查询列表
         */
        onSearch(){
          var that=this;
            this.listLoading=true;

            let _param = {
             currentPage: that.pageInfo.currentPage,
             pageSize: that.pageInfo.pageSize,
             status : that.formSearch.status,
             userName : that.formSearch.userName
            }
            const  param = Object.assign({},_param);
            apis.userApi.getAllUser(param)
            .then((data)=>{
              console.log(data);
                this.listLoading=false;
                if (data && data.data) {
                console.log(that.tableData)
                        var json = data.data;
                        if (json.rows != null && json.rows.length>0) {
                            that.pageInfo.pageTotal = json.total;
                            that.pageInfo.currentPage = json.curpage;
                            that.tableData = json.rows;
                            that.formEdit.status = json.rows.status
                        } else{
                          that.tableData = [];
                        }
                        if (!(json.rows != null && json.rows.length>0) && json.message ) {
                          this.$message({message: json.message,type: "error"});
                        }
                }
            })
            .catch((err)=>{
                this.listLoading=false;
                this.$message({message: '查询异常，请重试',type: "error"});
            });
        },
        handleSave(){
            if(this.dialogType=='add'){
                this.save();
            }
            else if(this.dialogType=='edit'){
                this.update();
            }
            else{
                this.$message({message: '操作异常',type: "error"});
            }
        },
        /**
         * 保存
         */
        save() {
            this.$refs["formEdit"].validate(valid => {
             var that = this;
                if(valid){
                    let param = Object.assign({}, this.formEdit);
                    apis.userApi.addUser(param)
                    .then((data)=>{
                        if(data&&data.data){
                            var json=data.data;
                             if(json.successed){
                                this.$message({message: '执行成功',type: "success"});
                                this.dialogEdittVisible = false;
                                that.onSearch();
                                return;
                            }
                        }
                       this.$message({message: json.message,type: "error"});
                    })
                    .catch((err)=>{
                        this.$message({message: '执行失败，请重试',type: "error"});
                    });
                }


            });
        },
         /**
         * 更新
         */
        update() {
            this.$refs["formEdit"].validate(valid => {
            var that = this;
                if(valid){
                    let param = Object.assign({}, this.formEdit);
                    apis.userApi.updateUser(param)
                    .then((data)=>{
                    console.log(data);
                        if(data&&data.data){
                            var json=data.data;
                             if(json.successed){
                                this.$message({message: '执行成功',type: "success"});
                                this.dialogEdittVisible = false;
                                that.onSearch();
                                return;
                            }
                        }
                       this.$message({message: '执行失败，请重试',type: "error"});
                    })
                    .catch((err)=>{
                        this.$message({message: '执行失败，请重试',type: "error"});
                    });
                }


            });
        },
      /**
       * 删除
       */
      handleDelete(index, rowData) {
        console.log(this);
        var that = this;
        var userId=rowData.userId;
        this.$confirm('此操作将永久删除该人员, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          apis.userApi.deleteUser({userId : userId})
            .then((data)=>{
              if(data.data.successed){
                that.onSearch();
              }
              this.$common.isSuccess(data,()=>{
                console.log("执行了");
              });
            })
            .catch((err)=>{
              debugger;
              this.$message({message: '执行失败，请重试',type: "error"});
            });

        }).catch(() => {
          this.$message({type: 'info',message: '已取消删除'});
        });

      },
        /**
         * 批量删除
         */
        deleteMany() {
            var ids= this.multipleSelection.map(item => item.id);
            if(ids.length==0){
                 this.$message({message: '请选择要删除的项',type: "warn"});
                return;
            }
            debugger;
            this.$confirm('此操作将批量永久删除文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                        apis.msgApi.deleteBatch({ids:ids})
                        .then((data)=>{
                            this.$common.isSuccess(data,()=>{
                                debugger;
                                this.onSearch();
                            });
                        })
                        .catch((err)=>{
                            debugger;
                            this.$message({message: '执行失败，请重试',type: "error"});
                        });

                }).catch(() => {
                    this.$message({type: 'info',message: '已取消删除'});
                });

        },
        onReset(){
            //this.$refs['formSearch'].resetFields();
          this.formSearch= { //表单查询
            userName: '',
              status:''
          }
        },
        /**
         * 打开编辑弹窗
         */
        handleAdd() {
            this.dialogEdittVisible = true;
            this.$nextTick(()=>{
                this.dialogType='add';
                this.formEditTitle='新增';
                this.formEditDisabled=false;
            });


        },
        /**
         * 打开编辑弹窗
         */
        handleEdit(index, rowData) {
            //var msg = "索引是:" + index + ",行内容是:" + JSON.stringify(rowData);
            //this.$message({message: msg,type: "success"});
            this.dialogEdittVisible = true;//等dom渲染完，读取data中初始值，然后再复制，这样重置的是data中初始值
            this.$nextTick(()=>{
                this.dialogType='edit';
                this.formEditTitle='编辑';
                this.formEditDisabled=false;
                this.formEdit= Object.assign({}, rowData);
                this.formEdit.gender+='';//必须转换成字符串才能回显
            });
        },
        /**
         * 打开详情页
         */
        handleDetail(index,rowData){
            this.dialogEdittVisible = true;
            this.$nextTick(()=>{
                 this.dialogType='show';
                this.formEditTitle='详情';
                this.formEditDisabled=true;
                this.formEdit= Object.assign({}, rowData) ;
                this.formEdit.gender+='';
            });

        },
        /**
         * 关闭弹框，数据重置
         */
        closeDialog(formName){
            this.$refs[formName].resetFields();
        },
        /**
         * 分页大小切换
         */
        handleSizeChange(val) {
            this.pageInfo.pageSize = val;
            this.onSearch();
        },
        /**
         * 分页切换
         */
        handleCurrentChange(val) {
            this.pageInfo.currentPage = val;
            this.onSearch();
        },
        /**
         * 点击选择
         */
        handleSelectionChange(val) {
            this.multipleSelection = val;
            // this.$message({
            //     message: '选中的项是:' + JSON.stringify(this.multipleSelection),
            //     type: "success"
            // });
        },
        /**
         * 打开详情页
         */
        openDetail(row){
            this.$common.OpenNewPage(this,'detail',row);
        }


    }
};
</script>
